<template>
  <div class="notice">
    <div class="title">
      <i class="iconfont iconzuojiantou" @click="onClickLeft"></i>
      <span>{{ notice }}</span>
      <i class="iconfont iconzuojiantou" style="color: white;"></i>
    </div>
    <div class="list" ref="wrapper">
        <ul>
          <li
            v-for="(item, index) in dataList"
            :key="index"
            @click="goDetail(item.id)"
          >
            <div class="left" v-if="url + item.image != url + null || item.image == ''">
              <img :src="item.villageUrl" alt="" />
            </div>
            <div class="left" v-else>
              <img src="../assets/index/index13.png" alt="" />
            </div>
            <div class="right">
              <p class="tit">
                <span>{{ item.villageNoticeName}}</span>
              </p>
              <p class="middle">{{item.villageSketch}}</p>
              <p class="bottom">
                <span>{{item.villageTime}}</span>
                <span>
                  <i class="iconfont iconyanjing"></i>
                  <span>{{ item.villageLook }}</span>
                </span>
              </p>
            </div>
          </li>
        </ul>
    </div>
  </div>
</template>

<script>
import { Indicator } from 'mint-ui';
import { NavBar } from "vant";
export default {
  name: "notice",
  data() {
    return {
      notice: "",
      dataList: [],
      nodata: false,
      allLoaded: false, //如果为真的时候上拉加载执行的方法不会再次的触发
      topStatus: "", //下拉刷新的loading
      bottomStatus: "", //上拉加载的loading
      pageNo: 1,
      pageSize: 10,
      wrapperHeight: 0,
      url: ""
      // top:"",
    };
  },
  created() {
    this.url = window.domain;
    this.notice = this.$route.query.value;
    if (this.$route.query.value == "村部通知") {
      this.getVillageNotice();
    } else {
      this.getshings();
    }
    // window.addEventListener('scroll', this.handleScroll, true)
  },
  mounted() {
    // this.wrapperHeight =
    // document.documentElement.clientHeight -
    // this.$refs.wrapper.getBoundingClientRect().top;

    // // 监听浏览器返回
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL);
      window.addEventListener("popstate", this.goBack, false);
    }
  },
  // computed: {
  //   HeightTop(){
  //     return this.dataList.length * 2.02 + 'rem'
  //   }
  // },
  destroyed() {
    // 销毁监听浏览器事件
    window.removeEventListener("popstate", this.goBack, false);
  },
  methods: {
    //获取村部通知内容
    getVillageNotice() {
      this.$axios.post("/cct/notice/userlook", {}).then(res => {
        console.log("村部通知", res);
        if (res.data.code == 0) {
          this.dataList = res.data.rows;
        }
      });
    },
    //获取村内事内容
    getshings() {
      // this.$axios
      //   .post("List", {
      //     district: "郑州"
      //   })
      //   .then(res => {
      //     console.log("村内事", res);
      //     if (res.data.code == 0) {
      //       this.dataList = res.data.rows;
      //     }
      //   });
      console.log("获取村内事的内容", this.$route.query.id);
      this.$axios
        .post("/cct/thing/appCctVillageThingList", {
          // district: "郑州"
          id: this.$route.query.id
        })
        .then(res => {
          console.log("村内事", res);
          if (res.data.code == 0) {
            this.dataList = res.data.rows;
          }
        });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    goDetail(val) {
      //判断进入村部通知还是村内事
      if (this.$route.query.value == "村内事") {
        this.$axios
          .post("/cct/notice/look", {
            id: val
          })
          .then(res => {
            console.log(res);
            this.$router.push({
              path: "/detaile",
              query: {
                id: val
              }
            });
          });
      } else {
        this.$axios
          .post("/cct/notice/look", {
            id: val
          })
          .then(res => {
            console.log(res);
            this.$router.push({
              path: "/detaile",
              query: {
                idd: val
              }
            });
          });
      }
    },
    intercept(i) {
      // if(i.indexOf("<img src=") == -1){
      //   if(i.length < 50){
      //     return i
      //   }
      //   else{
      //     let subs = i.substring(4,24)
      //     return subs
      //   }
      // }
      // else{
      //    let sub = i.substring(i.indexOf("<img src="),"<img src=" + i.indexOf("<img src=").length)
      //    return sub;
      // }
    },
    handleTopChange(status) {
      // 组件顶部状态发生变化时的回调函数
      this.topStatus = status;
    },
    handleBottomChange(type) {
      // 组件底部状态发生变化时的回调函数
      this.bottomStatus = type;
    },
    //下拉刷新
    loadTop() {
      var that = this;
      setTimeout(() => {
        that.dataList = [];
        that.pageNo = 1;
        that.allLoaded = false;
        that.nodata = false;
        if (that.$route.query.value == "村部通知") {
          that.getVillageNotice();
        } else {
          that.getshings();
        }
        that.$refs.loadmore.onTopLoaded();
      }, 200);
    },
    //上拉加载
    loadBottom() {
      var that = this;
      setTimeout(function() {
        that.allLoaded = false;
        that.nodata = false;
        that.pageNo++;
        if (that.$route.query.value == "村部通知") {
          that.getVillageNotice();
        } else {
          that.getshings();
        }
        that.$refs.loadmore.onBottomLoaded();
      }, 200);
    },
    goBack() {
      if (this.$route.query.GotBack == "Mymi") {
        this.$router.push("/Mymi");
      } else {
        this.$router.push("/index");
      }
    }
  }
};
</script>

<style lang="less" scoped>
.notice {
  font-size: 0;
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
  position: relative;
  .title {
    width: 100%;
    font-size: 0.36rem;
    color: #333;
    height: 1.25rem;
    line-height: 1.25rem;
    background-color: #fff;
    margin-bottom: 0.2rem;
    display: flex;
    justify-content: space-between;
    padding: 0 0.2rem;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
  }
  .list {
    margin-top: 0.2rem;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 1rem;
    position: absolute;
    top: 1.25rem;
    left: 0;
    bottom: 0;
    //  overflow-y: scroll;
    ul {
      li {
        width: 100%;
        padding: 0.2rem 0.3rem;
        box-sizing: border-box;
        background-color: #fff;
        display: flex;
        justify-content: flex-start;
        font-size: 0.26rem;
        margin-bottom: 0.2rem;
        .left {
          width: 1.66rem;
          height: 1.47rem;
          margin-right: 0.2rem;
          img {
            width: 1.66rem;
            height: 1.47rem;
          }
        }
        .right {
          width: 5rem;
          p.tit {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.1rem;
            span {
              display: inline-block;
              &:nth-child(1) {
                font-weight: bold;
                color: #333;
              }
            }
          }
          p.middle {
            width: 4rem;
            height: 0.38rem;
            font-size: 0.2rem;
            color: #999;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          p.bottom {
            font-size: 0.2rem;
            color: #999;
            text-align: right;
            display: flex;
            justify-content: space-between;
            margin-top: 0.05rem;
            i {
              vertical-align: -1px;
            }
          }
        }
      }
    }
  }
}
</style>
